// 公共样式
*{
    margin: 0;
    padding: 0;
}
html{
    font-family:"Helvetica Neue", Helvetica, STHeiTi, sans-serif;
    
}
body{
    font-size: 0.3rem ;
}



.tc {
    text-align: center
}

.tr {
    text-align: right
}

.hide {
    display: none;
}

.hidden {
    visibility: hidden;
}

.show {
    display: block;
}

.fl {
    float: left;
}

.fr {
    float: right;
}

.tc {
    text-align: center;
}

.tl {
    text-align: left;
}

.tr {
    text-align: right !important;
}

.cf:before,
.cf:after {
    content: "";
    display: table;
}

.cf:after,
.cl {
    clear: both;
}

.cf {
    zoom: 1;
}

.flex {
    display: flex;
}

.flex-b{
    justify-content: space-between
}

.flex-m {
    align-items: center;
}

.flex-r {
    flex-direction: row-reverse;
}

.flex-1 {
    flex: 1
}

.flex-2 {
    flex: 2 !important
}

.flex-3 {
    flex: 3
}

.flex-4 {
    flex: 4
}

.flex-5 {
    flex: 5
}

.mid {
    vertical-align: middle
}

.center {
    margin: 0 auto;
}



@for $i from 5 through 12 {
    .fs#{$i * 2} {
        font-size: $i * 2px;
    }
}

@for $i from 0 through 10 {
    .mr#{$i * 5} {
        margin-right: $i * 5px !important;
    }
    .ml#{$i * 5} {
        margin-left: $i * 5px !important;
    }
    .mt#{$i * 5} {
        margin-top: $i * 5px !important;
    }
    .mb#{$i * 5} {
        margin-bottom: $i * 5px !important;
    }
    .mg#{$i * 5} {
        margin: $i * 5px !important;
    }
    .pr#{$i * 5} {
        padding-right: $i * 5px !important;
    }
    .pl#{$i * 5} {
        padding-left: $i * 5px !important;
    }
    .pt#{$i * 5} {
        padding-top: $i * 5px !important;
    }
    .pb#{$i * 5} {
        padding-bottom: $i * 5px !important;
    }
    .pd#{$i*5} {
        padding: $i * 5px !important;
    }
}

@for $i from 1 through 30 {
    .w#{$i * 10} {
        width: $i * 10px;
    }
    @if $i<21 {
        .w#{$i * 5}p {
            width: $i * 5%;
        }
    }
}

.round {
    border-radius: 50%;
}



.bgfff {
    background: #fff;
} 
.red{
    background: red;
}

.p-center {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}



.ellipsis {
    display:block ;  
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}




